<template>
  <view class="fee-detail-page">
    <!-- 顶部警告横幅 -->
     <!--
    <view class="warning-banner">
      <text class="warning-icon">①</text>
      <text class="warning-text">由于系统原因,该订单无法分时段展示费用详情</text>
    </view>
    -->
    <!-- 费用明细卡片 -->
    <view class="fee-detail-card">
      <!-- 实付金额区域 -->
      <view class="actual-payment-section">
        <text class="payment-label">实付</text>
        <text class="payment-amount">¥{{ orderRealPrice || '0.00' }}</text>
      </view>

      <!-- 分割线 -->
      <view class="divider"></view>

      <!-- 订单总金额 -->
      <view class="fee-row">
        <text class="fee-label">订单总金额</text>
        <text class="fee-value">¥{{ orderRealPrice || '0.00' }}</text>
      </view>

      <!-- 费用明细 -->
      <view class="fee-details">
        <!-- 电费 -->
        <view class="fee-item">
          <view class="fee-item-row">
            <text class="fee-item-label">电费</text>
            <text class="fee-item-value">¥{{ powerPrice || '0.00' }}</text>
          </view>
          <text class="fee-item-desc">充电{{ totalPower || '0' }}度</text>
        </view>

        <!-- 服务费 -->
        <view class="fee-item">
          <view class="fee-item-row">
            <text class="fee-item-label">服务费</text>
            <text class="fee-item-value">¥{{ servicePrice || '0.00' }}</text>
          </view>
          <text class="fee-item-desc">充电{{ totalPower || '0' }}度</text>
        </view>
      </view>

      <!-- 优惠总金额 -->
      <view class="fee-row">
        <text class="fee-label">优惠总金额</text>
        <text class="fee-value discount">-¥{{ discount || '0.00' }}</text>
      </view>

      <!-- 优惠明细 -->
      <view class="fee-details">
        <!-- 会员优惠 -->
        <view class="fee-item">
          <view class="fee-item-row">
            <text class="fee-item-label">会员优惠</text>
            <text class="fee-item-value discount">-¥{{ discount || '0.00' }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 从URL参数获取的数据
      orderNum: '',
      orderNumber: '',
      orderRealPrice: 0,
      totalPower: 0,
      paySuccessTime: '',
      outTime: '',
      stationName: '',
      carNumber: '',
      payChannel: '',
      powerPrice: 0,
      servicePrice: 0,
      discount: 0,
      connectorId: ''
    }
  },
  
  onLoad(options) {
    console.log('费用明细页面接收到的原始options:', options);
    
    // 从URL参数获取数据
    this.orderNum = options.orderNum || '';
    this.orderNumber = options.orderNumber || '';
    this.orderRealPrice = parseFloat(options.orderRealPrice) || 0;
    this.totalPower = parseFloat(options.totalPower) || 0;
    this.paySuccessTime = options.paySuccessTime || '';
    this.outTime = options.outTime || '';
    this.stationName = options.stationName || '';
    this.carNumber = options.carNumber || '';
    this.payChannel = options.payChannel || '';
    this.powerPrice = parseFloat(options.powerPrice) || 0;
    this.servicePrice = parseFloat(options.servicePrice) || 0;
    this.discount = parseFloat(options.discount) || 0;
    this.connectorId = options.connectorId || '';
    
    console.log('费用明细页面处理后的数据:', {
      orderNum: this.orderNum,
      orderNumber: this.orderNumber,
      orderRealPrice: this.orderRealPrice,
      totalPower: this.totalPower,
      powerPrice: this.powerPrice,
      servicePrice: this.servicePrice,
      discount: this.discount,
      paySuccessTime: this.paySuccessTime,
      outTime: this.outTime,
      stationName: this.stationName,
      carNumber: this.carNumber,
      payChannel: this.payChannel,
      connectorId: this.connectorId
    });
  }
}
</script>

<style scoped>
.fee-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 0;
}

/* 顶部警告横幅 */
.warning-banner {
  background: #fc7700;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
}

.warning-icon {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin-right: 15rpx;
}

.warning-text {
  color: #fff;
  font-size: 28rpx;
  flex: 1;
}

/* 费用明细卡片 */
.fee-detail-card {
  background: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 实付金额区域 */
.actual-payment-section {
  text-align: center;
  margin-bottom: 30rpx;
}

.payment-label {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.payment-amount {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}

/* 分割线 */
.divider {
  height: 1rpx;
  background: #f0f0f0;
  margin: 30rpx 0;
}

/* 费用行 */
.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.fee-label {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.fee-value {
  font-size: 32rpx;
  color: #333;
}

.fee-value.discount {
  color: #fc7700;
}

/* 费用明细区域 */
.fee-details {
  background: #efefef;
  border-radius: 16rpx;
  padding: 20rpx 40rpx;
}

.fee-item {
  margin-bottom: 20rpx;
}

.fee-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.fee-item-label {
  font-size: 28rpx;
  color: #333;
}

.fee-item-value {
  font-size: 28rpx;
  color: #333;
}

.fee-item-value.discount {
  color: #fc7700;
}

.fee-item-desc {
  font-size: 24rpx;
  color: #999;
  margin-left: 0;
}
</style> 